@import '@views/live/cc/assets/styles/header.scss';
ol,
ul {
  list-style: none;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.playback {
  position: absolute;
  @include width-height-full();
  overflow-x: auto;
  min-width: 1150px;
  .left {
    width: 260px;
    overflow: hidden;
    @include layout(0, unset, 0, 0);
    .video-wrapper {
      @include width-height(260px, 196px);
      #player {
        @include width-height-full();
      }
    }
    .document-wrapper {
      @include width-height(260px, 196px);
      #document {
        @include width-height-full();
      }
    }
    .question-wrapper {
      @include layout(196px, 0, 0, 0);
      min-width: 260px;
      #questionAnswer {
        @include width-height-full();
      }
    }
  }
  .center {
    @include layout(0, 260px, 0, 260px);
    border-left: 1px solid rgba(241, 241, 241, 1);
    border-right: 1px solid rgba(241, 241, 241, 1);
    .left-bar {
      opacity: 0;
      width: 12px;
      background-color: #f2faff;
      @include layout(0, unset, 0, -12px);
      z-index: 1;
      .left-bar-swith {
        background: url(~@views/live/cc/assets/images/icon-playbar.png) -161px -297px no-repeat;
        @include width-height(12px, 46px);
        position: absolute;
        left: 0;
        top: 45%;
      }
    }
    .left-bar:hover {
      opacity: 1;
    }
    .left-bar-active {
      opacity: 1;
      .left-bar-swith {
        background: url(~@views/live/cc/assets/images/icon-playbar.png) -111px -297px no-repeat;
      }
    }
    .document-wrapper {
      @include layout(0, 0, 40px, 0);
      #document {
        @include width-height-full();
      }
    }
    .video-wrapper {
      @include layout(0, 0, 40px, 0);
      #player {
        @include width-height-full();
      }
    }
    .thumbnail-wrapper {
      display: none;
      @include layout(0, 0, 40px, unset);
      width: 160px;
      #thumbnail {
        @include width-height-full();
      }
    }
    .controls-wrapper {
      @include layout(unset, 0, 0, 0);
      height: 40px;
      z-index: 2;
      #controls {
        @include width-height-full();
      }
    }
    .right-bar {
      opacity: 0;
      width: 12px;
      @include layout(0, -12px, 0, unset);
      background-color: #f2faff;
      z-index: 1;
      .right-bar-swith {
        background: url(~@views/live/cc/assets/images/icon-playbar.png) -111px -297px no-repeat;
        @include width-height(12px, 46px);
        position: absolute;
        left: 0;
        top: 45%;
      }
    }
    .right-bar:hover {
      opacity: 1;
    }
    .right-bar-active {
      opacity: 1;
      .right-bar-swith {
        background: url(~@views/live/cc/assets/images/icon-playbar.png) -161px -297px no-repeat;
      }
    }
  }
  .right {
    width: 260px;
    overflow: hidden;
    @include layout(0, 0, 0, unset);
    .chat-wrapper {
      @include layout(0, 0, 0, 0);
      min-width: 260px;
      #chat {
        @include width-height-full();
      }
    }
  }
}
